import Api from '../service/Api';

let _module = null;

function s_module(m) {
  _module = m;
}

function g_module() {
  return _module;
}

export function loadModuleList(module) {
    const { id, url, title, pageNo } = module;
    s_module(module);
    if (id < 0) {
      console.log('跳转')
      const tpl = `
          <div class="top">
              <p>${title}</p>
          </div>
          <iframe height='1077px' frameborder='0' width='1310px' sandbox="allow-scripts allow-same-origin allow-popups" src='${url}'>不支持iframe</iframe>
      `
      $('.right').html(tpl)
    } else if (id > 0) {
      Api.get("/web/wsjson.asmx/Get_Json_SubjectContentSearchListByID", {
          Page: pageNo,
          PageSize: 7,
          Subjects_ID: id,
          Keyword: ""
      }).then((resp) => {
          console.log(resp);
          if (resp && resp.Goodo && resp.Goodo.R) {

            if (resp.Goodo.R instanceof Array) { // 有多个栏目 可以渲染列表
              const baseUrl = API.baseUrl;
                const ul = "<ul class='list'>" + resp.Goodo.R.map(item => {
                	let img = '';
                	if (item.PicUrl) {
                		return `<li>
    	                <a class="open-detail" data-id="${item.Contents_ID}">
    	                <img src="${baseUrl}${item.PicUrl}"/>
    	                    <p class="title">${item.ContentTitle}</p>
    	                    <p><span>${item.SubjectName}</span>${moment(item.SubmitDate, 'YYYY/M/D HH:mm:ss').format('YYYY-MM-DD')}</p>
    	                </a>
    	                </li>`;
                	} else {
                		return `<li class="on">
    	                <a class="open-detail" data-id="${item.Contents_ID}">
    	                <img src="${item.PicUrl}"/>
    	                    <p class="title">${item.ContentTitle}</p>
    	                    <p><span>${item.SubjectName}</span>${moment(item.SubmitDate, 'YYYY/M/D HH:mm:ss').format('YYYY-MM-DD')}</p>
    	                </a>
    	                </li>`;
                	}


                }).join('') + "</ul>";

                // 分页器部分
                const {PageCount}  = resp.Goodo;
                let navList = "";
                if (PageCount <= 3) {
                  for(let i = 1; i <= PageCount; i++) {
                    if (pageNo === i) {
                      navList += `<li><a data-page="${i}" class="navbtn active">${i}</a></li>`
                    } else {
                      navList += `<li><a data-page="${i}" class="navbtn">${i}</a></li>`
                    }
                  }
                } else if (pageNo + 2 >= PageCount) {
                  for(let i = PageCount - 2; i <= PageCount; i++) {
                    if (pageNo === i) {
                      navList += `<li><a data-page="${i}" class="navbtn active">${i}</a></li>`
                    } else {
                      navList += `<li><a data-page="${i}" class="navbtn">${i}</a></li>`
                    }
                  }
                } else {
                  navList = `
                    <li><a data-page="${i}" class="navbtn">${pageNo - 1}</a></li>
                    <li><a data-page="${i}" class="navbtn active">${pageNo}</a></li>
                    <li><a data-page="${i}" class="navbtn">${pageNo + 1}</a></li>
                  `
                }
                const nav = `
                  <nav aria-label="Page navigation">
                    <ul class="pagination">
                      <li>
                        <a class="pageFirst ${pageNo == 1 ? 'disable' : ''}" aria-label="First">
                          <span aria-hidden="true">&laquo;</span>
                        </a>
                      </li>
                      <li>
                        <a class="pagePrevious ${pageNo == 1 ? 'disable' : ''}" aria-label="Previous">
                          <span aria-hidden="true">&lt;</span>
                        </a>
                      </li>
                      ${navList}
                      <li>
                        <a class="pageNext ${pageNo == PageCount ? 'disable' : ''}" aria-label="Next">
                          <span aria-hidden="true">&gt;</span>
                        </a>
                      </li>
                      <li>
                        <a class="pageLast ${pageNo == PageCount ? 'disable' : ''}" aria-label="Last">
                          <span aria-hidden="true">&raquo;</span>
                        </a>
                      </li>
                    </ul>
                  </nav>
                `


                $('.right').html(`<div class="top">
                    <p>${title}</p>
                </div>
                <div class="cent">${ul}${nav}</div>`);

                list_event({ id, url, title, pageNo, PageCount });

            } else {
              // 只有一个栏目 直接渲染详情页 且没有返回键
              loadModuleDetail(resp.Goodo.R.Contents_ID, true);
            }
          } else {
            window.nonePage();
          }
      });
    }
}

function list_event({ id, url, title, pageNo, PageCount }) {

  $(".right .open-detail").click(function() {
      loadModuleDetail($(this).data('id'));

      return false;
  });

  $(".right .back").click(function () {
      return false;
  });

  $(".pageFirst").click(function() {
      loadModuleList({ id, url, title, pageNo: 1});
      return false;
  });
  $(".pageLast").click(function() {
      loadModuleList({ id, url, title, pageNo: PageCount});
      return false;
  });
  $(".pagePrevious").click(function() {
      loadModuleList({ id, url, title, pageNo: pageNo - 1});
      return false;
  });
  $(".pageNext").click(function() {
      loadModuleList({ id, url, title, pageNo: pageNo + 1});
      return false;
  });

  $(".navbtn").click(function() {
      loadModuleList({ id, url, title, pageNo: $(this).data("page")});
      return false;
  })

}

export function loadModuleDetail(id, noBack) {
    Api.get("/web/wsjson.asmx/Get_Json_Content", {
        Content_ID: id
    }).then((resp) => {
        const record = resp.Goodo.Record;

        const tpl = `
        <div class="top">
            <p>详情</p>
            <a href="#" class="back" style="${noBack ? 'display: none;' : ''}">
               <img src="img/news_public/news_sys.png" />返回
            </a>
        </div>
        <div class="centra">
            <h4>${record.ContentTitle}</h4>
			<p class="title">时间: <span>${moment(record.SubmitDate, 'YYYY/M/D HH:mm:ss').format('YYYY-MM-DD')}</span>发布人：<span>${record.UserName}</span>浏览次数：<span>${record.ICount}</span></p>
            <p>${record.Content.replace("\n", "</p><p>")}</p>
        </div>
        `;

        $(".right").html(tpl);

        $(".right .back").click(function () {
            loadModuleList(g_module());
            return false;
        });
    });
}
